import { _decorator, Color, color, Component, Label, Layout, Node, RichText, UITransform } from 'cc';
import { CardsStruct } from './CardsStruct';
const { ccclass, property } = _decorator;

@ccclass('CardItemPrefab')
export class CardItemPrefab extends Component {
    @property(Layout)
    idiomLeftLayout: Layout = null;//左边成语

    @property(Layout)
    idiomCenterLayout: Layout = null;//中间成语

    @property(RichText)
    RichTextLeft: RichText = null;//左边成语

    @property(RichText)
    RichTextCenter: RichText = null;//中间成语

    @property(Label)
    bottomLabel: Label = null;//底部文字
    
    data: CardsStruct = null;

    setData(data: CardsStruct) {
        this.node.getComponent(UITransform).setContentSize(120,240);

        let name_arr = data.name.split("", 4);
        console.log("data.name: ", data.name);
        console.log("name_arr: ", name_arr);

        this.data = data;
        // this.RichTextLeft.string = `
        //     <size=12><color=#000000>${name_arr[0]}</color></size>
        //     <size=12><color=#000000>${name_arr[0]}</color></size>
        //     <size=12><color=#000000>${name_arr[0]}</color></size>
        //     <size=12><color=#000000>${name_arr[0]}</color></size>
        // `;
        var str = "";
        for (let index = 0; index < name_arr.length; index++) {
            str += `
                ${name_arr[index]}
            `;
        }
        var str2 = `
            ${name_arr[0]}<br/>
            ${name_arr[1]}<br/>
            ${name_arr[2]}<br/>
            ${name_arr[3]}
        `;
        console.log("11111str: ", str);
        // this.RichTextLeft.string = `<size=10><color=#000000>${str2}</color></size>`;
        this.RichTextLeft.string = `
            <size=14><color=#000000>${name_arr[0]}</color></size>

            <size=14><color=#000000>${name_arr[1]}</color></size>

            <size=14><color=#000000>${name_arr[2]}</color></size>

            <size=14><color=#000000>${name_arr[3]}</color></size>
        `;
        var str = "";
        for (let index = 0; index < 4; index++) {
            str = str.trim() + `
                ${data.tone_arr[index]}<b/>
                ${name_arr[index]}
            `;
        }
        var str2 = `
            ${str}
        `;

        console.log("22222str: ", str);
        this.RichTextCenter.string = `
            <size=12><color=#000000>${data.tone_arr[0]}</color></size>
            <size=18><color=#000000><b>${name_arr[0]}</b></color></size>

            <size=12><color=#000000>${data.tone_arr[1]}</color></size>
            <size=18><color=#000000><b>${name_arr[1]}</b></color></size>

            <size=12><color=#000000>${data.tone_arr[2]}</color></size>
            <size=18><color=#000000><b>${name_arr[2]}</b></color></size>

            <size=12><color=#000000>${data.tone_arr[3]}</color></size>
            <size=18><color=#000000><b>${name_arr[3]}</b></color></size>
        `;
        this.RichTextCenter.lineHeight = 14;
        // this.RichTextCenter.string = `
        // <size=16><color=#000000>${name_arr[0]}</color></size>
        // `;
        // let labelColor = ['#000000', '#0033FF', '#FF0014'];
        // this.label_star.color = color(labelColor[data.name - 1]);
        // this.label_star.string = `${data.name}星`;

        this.bottomLabel.string = `${data.dec}好吧第三方<br/>大东方`
    }
}

